<template>
  <div>
    <CustomDialog :visible.sync="dialogVisible" :isNotScroll="false" top="12vh" @close="onClose">
      <div class="dialog-content">
        <div class="title">短信记录</div>
        <div class="filter-wrap">
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            class="mr-12"
            @change="onSearch"
            style="width: 1rem; margin-right: 0.12rem"
          />
          <el-input
            v-model.trim="keyword"
            placeholder="搜索联系人/手机号/内容 回车查询"
            class="kw"
            clearable
            @keyup.enter="onSearch"
          />
        </div>
        <div class="table-wrap" v-loading="loading">
          <el-table :data="list" border style="width: 100%" table-layout="fixed" height="2rem">
            <el-table-column prop="id" label="ID" width="150" align="center" />
            <el-table-column label="顾客姓名" width="200" align="center">
              <template #default="scope">{{
                scope.row.user_name || scope.row.name || '-'
              }}</template>
            </el-table-column>
            <el-table-column prop="mobile" label="联系电话" width="160" align="center" />
            <el-table-column prop="content" label="短信内容" align="left" show-overflow-tooltip />
            <el-table-column
              prop="create_time"
              label="创建时间"
              align="left"
              width="160"
              show-overflow-tooltip
            />
          </el-table>
        </div>
        <div class="footer">
          <div class="left">共{{ total }}条</div>
          <div class="right">
            <Pagination
              :total="total"
              v-model:page="query.page"
              v-model:limit="query.limit"
              @pagination="loadList"
            />
          </div>
        </div>
      </div>
    </CustomDialog>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import CustomDialog from '@/components/CustomDialog/Index.vue'
import Pagination from '@/components/Pagination/Index.vue'
import { deskBookSmsList } from '@/api/book'
import { LocalStorage } from '@/utils/storage'

interface Props {
  modelValue: boolean
}
const props = withDefaults(defineProps<Props>(), { modelValue: false })
const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()

const dialogVisible = computed({
  get() {
    return props.modelValue
  },
  set(v: boolean) {
    emit('update:modelValue', v)
  }
})

const loading = ref(false)
const list = ref<any[]>([])
const total = ref<number>(0)
const query = reactive({ page: 1, limit: 10, start_time: '', end_time: '', keyword: '' })
const dateRange = ref<string[] | null>(null)
const keyword = ref<string>('')

function getStatusType(status: any) {
  const v = typeof status === 'object' ? status?.value : status
  switch (v) {
    case 1:
      return 'success' // 成功
    case 0:
      return 'info' // 待发送/未知
    default:
      return ''
  }
}
function getStatusText(status: any) {
  if (typeof status === 'object') return status?.text || '—'
  if (status === 1) return '成功'
  if (status === 0) return '待发送'
  return '—'
}

async function loadList() {
  const bookId = LocalStorage.get && LocalStorage.get('bookId')
  if (!bookId) {
    list.value = []
    total.value = 0
    return
  }
  loading.value = true
  try {
    // 同步过滤条件
    if (Array.isArray(dateRange.value) && dateRange.value.length === 2) {
      query.betweenTime = dateRange.value
    } else {
      query.betweenTime = undefined
    }
    query.search = keyword.value
    const res: any = await deskBookSmsList({ book_id: bookId, ...query })
    if (res?.status === 200) {
      list.value = res?.data?.list?.data || []
      total.value = Number(res?.data?.list?.total) || 0
    }
  } finally {
    loading.value = false
  }
}

function onClose() {
  dialogVisible.value = false
}

function onSearch() {
  query.page = 1
  loadList()
}

watch(dialogVisible, v => {
  if (v) {
    query.page = 1
    loadList()
  }
})
onMounted(() => {
  if (dialogVisible.value) loadList()
})
</script>

<style scoped lang="scss">
.dialog-content {
  width: 960px;
  .title {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin-bottom: 12px;
  }
  .filter-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    width: 4rem;
    .kw {
      width: 260px;
      margin-left: 20rpx;
    }
    .mr-12 {
      margin-right: 12px;
    }
  }
  .table-wrap {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
  }
  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    .left {
      font-size: 14px;
      color: #333;
    }
  }
}
</style>
